/*
 * @Author: yxfan
 * @Date: 2022-11-24 20:57:22
 * @LastEditTime: 2022-11-26 18:08:15
 * @FilePath: /umi-demo/src/pages/demo/EditTree/index.js
 * @Description:
 */
import React, { useEffect, useState, useMemo, cloneElement } from 'react';
import './index.less';
import { Tree, Input } from 'antd';
import Com from './component';
const defaultData = [
  {
    title: 'p1',
    key: '0-0',
    children: [
      {
        title: <Com>parent 1-0</Com>,
        key: '0-0-0',
        // disabled: true,
        children: [
          {
            title: 'leaf',
            key: '0-0-0-0',
            disableCheckbox: true,
          },
          {
            title: 'leaf',
            key: '0-0-0-1',
          },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [
          {
            title: <span style={{ color: '#1890ff' }}>sss</span>,
            key: '0-0-1-0',
          },
        ],
      },
    ],
  },
];
for (let i = 0; i <= 500; i++) {
  defaultData.push({
    title: <Com>{`test${i}`}</Com>,
    key: `test${i}`,
    children: [
      {
        title: <span style={{ color: '#1890ff' }}>{`sss${i}`}</span>,
        key: 'test-test' + i,
      },
    ],
  });
}
const App = () => {
  const [value, setSearchValue] = useState();
  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };

  const onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
  };

  function change(e) {
    // const { value } = e.target;
    setSearchValue(e);
  }

  const treeData = useMemo(() => {
    const loop = (data) =>
      data.map((item) => {
        let strTitle = item.title;
        let Com = null;
        // debugger;
        if (typeof strTitle != 'string') {
          const children = strTitle.props.children;
          Com = strTitle;
          strTitle = children;
          console.log(strTitle);
        }
        const index = strTitle.indexOf(value);
        const beforeStr = strTitle.substring(0, index);
        const afterStr = strTitle.slice(index + value?.length);
        const title =
          index > -1 ? (
            <span>
              {beforeStr}
              <span style={{ color: 'red' }}>{value}</span>
              {afterStr}
            </span>
          ) : (
            <span>{strTitle}</span>
          );
        if (Com) {
          Com = cloneElement(Com, { children: title });
        }
        if (item.children) {
          return {
            // title,
            title: Com ? Com : title,
            key: item.key,
            children: loop(item.children),
          };
        }

        return {
          title: Com ? Com : title,
          key: item.key,
        };
      });
    if (value) {
      return loop(defaultData);
    }
    return defaultData;
  }, [value]);

  return (
    <div className="edit-tree-wraper">
      <Input.Search onSearch={change} />
      {/* <div style={{ height: '400px', border: '1px solid', overflow: 'auto' }}> */}
      <Tree
        checkable
        defaultExpandedKeys={['0-0-0', '0-0-1']}
        defaultSelectedKeys={['0-0-0', '0-0-1']}
        defaultCheckedKeys={['0-0-0', '0-0-1']}
        onSelect={onSelect}
        onCheck={onCheck}
        treeData={treeData}
        height={500}
      />
      {/* </div> */}
    </div>
  );
};

export default App;
